<meta charset="UTF-8">
<div id="yongzhouvehicleinfo">
    <div class="full">
        <h3 class="h3-title">永州车辆基本信息</h3>
        <div style="height: 32px; margin: 10px 0;">
            <div class="fl">
                <i-input v-model.trim="queryParameter" icon="ios-close-circle-outline" @on-click="cleanValue"></i-input>
            </div>
            <div class="fl" style="padding-left: 10px;">
                <i-button type="info" @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </div>
            <div class="rt">
                <i-button type="primary" @click="handlerNewAdd">新增车辆信息</i-button>
            </div>
        </div>
        <div class="table-wraper">
            <i-table border :columns="columns" :height="taleHeight" :data="tableData" :loading="loading"></i-table>
        </div>
        <Modal v-model="modal" width="900" :title="modalTile">
            <div style="width:700px;margin:10px auto">
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">选择企业 : &nbsp;</i-col>
                    <i-col span="8">
                        <el-select v-model="enterIdValue" filterable placeholder="请选择" size="small" style="width: 100%;">
                            <el-option v-for="item in yongZhouenters" :key="item.enterId" :label="item.enterName" :value="item.enterId">
                            </el-option>
                        </el-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;设备序号 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="deviceid" :disabled=this.isEdit></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">车牌号码 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="plateNum"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;道路运输许可证号 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="roadTransportLicense"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">统一社会信用代码 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="identifier"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;车牌颜色 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model.sync="color">
                            <i-option value="1">蓝色</i-option>
                            <i-option value="2">黄色</i-option>
                            <i-option value="3">黑色 </i-option>
                            <i-option value="4">白色 </i-option>
                            <i-option value="5">绿色 </i-option>
                            <i-option value="9">其他 </i-option>
                        </i-select>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">车辆厂牌 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="brand"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;车辆类型 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="type"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">车辆型号 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="model"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;车辆发动机号 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="engineNum"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">行驶注册日期 : &nbsp;</i-col>
                    <i-col span="8">
                        <date-picker type="date" v-model="registrationDate" style="width: 100%;"></date-picker>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;车辆VIN码 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="vim"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">车辆所有人类型 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="ownerType"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;车辆所有人名称 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="ownerName"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">所有人身份证号: &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="ownerID"></i-input>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;经营范围 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="scope"></i-input>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">座位数: &nbsp;</i-col>
                    <i-col span="8">
                        <Input-Number :max="1000" :min="1" v-model="seatNum"></Input-Number>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;车辆长单位毫米 : &nbsp;</i-col>
                    <i-col span="8">
                        <Input-Number :max="1000000" :min="1" v-model="length"></Input-Number>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">车辆宽(毫米): &nbsp;</i-col>
                    <i-col span="8">
                        <Input-Number :max="100000" :min="1" v-model="width"></Input-Number>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;车辆高(毫米) : &nbsp;</i-col>
                    <i-col span="8">
                        <Input-Number :max="100000" :min="1" v-model="height"></Input-Number>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">企业类别 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model.sync="category">
                            <i-option value="1">巡游出租企业 </i-option>
                            <i-option value="2">网约出租企业 </i-option>
                            <i-option value="3">其他 </i-option>
                        </i-select>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;车辆燃料类型 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-select v-model="fuelType">
                            <i-option v-for="item in fuelTypeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </i-col>
                </Row>
                <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">核发日期: &nbsp;</i-col>
                    <i-col span="8">
                        <date-picker type="date" v-model="issuDate" style="width: 100%;"></date-picker>
                    </i-col>
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">&nbsp;核发机关 : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="issuOrganization"></i-input>
                    </i-col>
                </Row>
            </div>
            <div slot="footer" style="text-align: center;">
                <i-button style="width:480px" type="primary" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
            </div>
        </Modal>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#yongzhouvehicleinfo",
            i18n: utils.getI18n(),
            data: {
                filterData: [],
                isShowMatchDev: false,
                sosoValue: '',
                groupslist: vRoot.$children[1].groups,
                enterIdValue: '',
                deviceid: '',
                plateNum: '', //车牌号码' 
                roadTransportLicense: '', //道路运输许可证号
                identifier: '', //统一社会信用代码' ,
                category: '1', //1:巡游出租企业 2:网约出租企业 0:其他' ,
                color: '1',
                brand: '', //车辆厂牌' 
                type: '', //车辆类型' ,
                model: '', //车辆型号' ,
                engineNum: '', //车辆发动机号' ,
                registrationDate: new Date(), //行驶注册日期' ,
                vim: '', //车辆VIN码' ,
                ownerType: '', //车辆所有人类型' ,
                ownerName: '', //车辆所有人名称' ,
                ownerID: '', //车辆所有人身份证 号码' ,

                seatNum: '', //座位数' ,
                length: '', //车辆长单位毫米' ,
                width: '', //车辆宽 单位:毫米' ,
                height: '', //车辆高 单位:毫米' ,

                scope: '', //经营范围' ,
                issuOrganization: '', //核发机关' ,
                issuDate: new Date(), //核发日期' ,


                fuelType: 'A',
                fuelTypeList: [{
                    label: '汽油',
                    value: "A"
                }, {
                    label: '柴油',
                    value: "B"
                }, {
                    label: '电',
                    value: "C"
                }, {
                    label: '混合油',
                    value: "D"
                }, {
                    label: '天然气',
                    value: "E"
                }, {
                    label: '液化石油气',
                    value: "F"
                }, {
                    label: '甲醇',
                    value: "L"
                }, {
                    label: '乙醇',
                    value: "M"
                }, {
                    label: '太阳能',
                    value: "N"
                }, {
                    label: '混合动力',
                    value: "O"
                }, {
                    label: '无',
                    value: "Y"
                }, {
                    label: '其他',
                    value: "Z"
                }, ],

                isEdit: false,
                modal: false,
                queryParameter: "",
                loading: true,
                columns: [{
                    title: vRoot.$t("bgMgr.action"),
                    key: 'action',
                    width: 130,
                    render: function(h, params) {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: function() {
                                        editObject = params.row;
                                        vueInstanse.isEdit = true;
                                        vueInstanse.modal = true;
                                        vueInstanse.setRowInfo(editObject);
                                        vueInstanse.enterIdValue = editObject.enterId;

                                    }
                                }
                            }, vRoot.$t("bgMgr.edit")),

                            h('Poptip', {
                                props: {
                                    confirm: true,
                                    title: vRoot.$t("message.confirmDel")
                                },
                                style: {
                                    marginRight: '5px',
                                },
                                on: {
                                    'on-ok': function() {
                                        vueInstanse.handleDelete(params);
                                    }
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    }
                                }, vRoot.$t("bgMgr.delete"))
                            ]),
                        ]);
                    }
                }, {
                    title: '设备序号',
                    key: 'deviceid',
                    width: 160,
                }, {
                    title: '企业类别',
                    width: 120,
                    render: function(h, params) {
                        var category = params.row.category;
                        var str = '';
                        switch (category) {
                            case 1:
                                str = '巡游出租企业';
                                break;
                            case 2:
                                str = '网约出租企业';
                                break;
                            case 3:
                                str = '其他';
                                break;
                            default:
                                break;
                        }
                        return h('span', {}, str);
                    },
                }, {
                    title: '颜色',
                    width: 120,
                    render: function(h, params) {
                        var color = params.row.color;
                        var str = '';
                        switch (color) {
                            case 1:
                                str = '蓝色';
                                break;
                            case 2:
                                str = '黄色';
                                break;
                            case 3:
                                str = '黑色';
                                break;
                            case 4:
                                str = '白色';
                                break;
                            case 5:
                                str = '绿色';
                                break;
                            case 9:
                                str = '其他';
                                break;
                            default:
                                str = '其他'
                                break;
                        }
                        return h('span', {}, str);
                    },
                }, {
                    title: '车辆厂牌',
                    key: 'brand',
                    width: 90,
                }, {
                    title: '车辆类型',
                    key: 'type',
                    width: 160,
                }, {
                    title: '车辆型号',
                    key: 'model',
                    width: 120,
                }, {
                    title: '车辆发动机号',
                    key: 'engineNum',
                    width: 160,
                }, {
                    title: '行驶注册日期',
                    key: 'registrationDate',
                    width: 160,
                }, {
                    title: '车辆VIN码',
                    key: 'vim',
                    width: 160,
                }, {
                    title: '车辆所有人类型',
                    key: 'ownerType',
                    width: 160,
                }, {
                    title: '车辆所有人名称',
                    key: 'ownerName',
                    width: 160,
                }, {
                    title: '车辆所有人身份证',
                    key: 'ownerID',
                    width: 160,
                }, {
                    title: '车辆燃料类型',
                    width: 100,
                    render: function(h, params) {
                        var fuelType = params.row.fuelType;
                        var str = '';
                        switch (fuelType) {
                            case 'A':
                                str = '汽油';
                                break;
                            case 'B':
                                str = '柴油';
                                break;
                            case 'C':
                                str = '电';
                                break;
                            case 'D':
                                str = '混合油';
                                break;
                            case 'E':
                                str = '天然气';
                                break;
                            case 'F':
                                str = '液化石油气';
                                break;
                            case 'L':
                                str = '甲醇';
                                break;
                            case 'M':
                                str = '乙醇';
                                break;
                            case 'N':
                                str = '太阳能';
                                break;
                            case 'O':
                                str = '混合动力';
                                break;
                            case 'Y':
                                str = '无';
                                break;
                            case 'Z':
                                str = '其他';
                                break;
                            default:
                                break;
                        }
                        return h('span', {}, str);
                    },
                }, {
                    title: '座位数',
                    key: 'seatNum',
                    width: 100,
                }, {
                    title: '车辆长(毫米)',
                    key: 'length',
                    width: 120,
                }, {
                    title: '车辆宽(毫米)',
                    key: 'width',
                    width: 120,
                }, {
                    title: '车辆高(毫米)',
                    key: 'height',
                    width: 120,
                }, {
                    title: '经营范围',
                    key: 'scope',
                    width: 160,
                }, {
                    title: '核发日期',
                    key: 'issuDate',
                    width: 160,
                }, {
                    title: '核发机关',
                    key: 'issuOrganization',
                    width: 160,
                }, ],
                tableData: [],
                taleHeight: 300,
                yongZhouenters: []
            },
            methods: {
                queryYongZhouEnters: function() {
                    var me = this;
                    var url = myUrls.queryYongZhouEnters();
                    var data = {
                        creater: userName,
                        keyword: this.queryParameter,
                    };
                    me.loading = true;
                    utils.sendAjax(url, data, function(resp) {
                        me.loading = false;
                        if (resp.status == 0) {

                            me.yongZhouenters = resp.enters;

                        }
                    });
                },
                onClickOutside: function() {
                    this.readonly = true;
                    this.isShowMatchDev = false;
                },
                focus: function() {
                    this.readonly = false;
                    var me = this;
                    if (this.sosoValue && this.sosoValue.trim()) {
                        me.sosoValueChange()
                    } else {
                        this.groupslist.forEach(function(group) {
                            group.devices.forEach(function(device) {
                                device.isOnline = vstore.state.deviceInfos[device.deviceid] ? vstore.state.deviceInfos[device.deviceid].isOnline : false;
                            })
                        });
                        this.filterData = this.groupslist;
                        this.isShowMatchDev = true;
                        this.queryDeviceId = '';
                        reportDeviceId = null;
                    }
                },
                sosoValueChange: function() {
                    var me = this;
                    var value = this.sosoValue;

                    if (this.timeoutIns != null) {
                        clearTimeout(this.timeoutIns);
                    };

                    this.timeoutIns = setTimeout(function() {
                        me.filterMethod(value);
                    }, 300);
                },
                sosoSelectGroup: function(groupName) {
                    this.filterMethod(groupName);
                },
                filterMethod: function(value) {
                    var filterData = [];
                    value = value.toLowerCase();
                    for (var i = 0; i < this.groupslist.length; i++) {
                        var group = this.groupslist[i];
                        if (
                            group.groupname.toLowerCase().indexOf(value) !== -1 ||
                            group.firstLetter.indexOf(value) !== -1 ||
                            group.pinyin.indexOf(value) !== -1
                        ) {
                            group.devices.forEach(function(device) {
                                device.isOnline = vstore.state.deviceInfos[device.deviceid] ? vstore.state.deviceInfos[device.deviceid].isOnline : false;
                            })
                            var copyGroup = deepClone(group);
                            copyGroup.devices = copyGroup.devices.slice(0, 9);
                            filterData.push(copyGroup)
                        } else {
                            var devices = group.devices
                            var obj = {
                                groupname: group.groupname,
                                devices: []
                            }
                            for (var j = 0; j < devices.length; j++) {
                                var device = devices[j]
                                var title = device.allDeviceIdTitle
                                device.isOnline = vstore.state.deviceInfos[device.deviceid] ? vstore.state.deviceInfos[device.deviceid].isOnline : false;
                                if (
                                    title.toLowerCase().indexOf(value) !== -1 ||
                                    device.firstLetter.indexOf(value) !== -1 ||
                                    device.pinyin.indexOf(value) !== -1
                                ) {
                                    obj.devices.push(device)
                                } else {
                                    if (device.remark) {
                                        if (device.remark.indexOf(value) !== -1) {
                                            obj.devices.push(device);
                                        };
                                    };
                                };
                                if (obj.devices.length >= 10) {
                                    break;
                                }
                            }
                            if (obj.devices.length) {
                                filterData.push(obj);
                                if (filterData.length >= 10) {
                                    break;
                                }
                            };
                        };
                    };
                    this.filterData = filterData;
                    if (!this.isShowMatchDev) {
                        this.isShowMatchDev = true;
                    };
                    if (!value) {
                        this.queryDeviceId = '';
                        reportDeviceId = null;
                    }
                },

                sosoSelect: function(item) {
                    this.sosoValue = item.allDeviceIdTitle;
                    this.deviceid = item.deviceid;
                    this.isShowMatchDev = false;
                },
                getDeviceTitle: function(deviceid) {
                    var title = "";
                    this.groupslist.forEach(function(group) {
                        var isReturn = false;
                        group.devices.forEach(function(device) {
                            if (device.deviceid === deviceid) {
                                isReturn = true;
                                title = device.title;
                                return false;
                            }
                        });
                        if (isReturn) {
                            return false
                        };
                    });
                    return title;
                },
                setRowInfo: function(row) {

                    this.deviceid = row.deviceid;
                    this.plateNum = row.plateNum;
                    this.identifier = row.identifier;
                    this.roadTransportLicense = row.roadTransportLicense;
                    this.category = String(row.category); //1:巡游出租企业 2:网约出租企业 0:其他' ,
                    this.scope = row.scope; //经营范围' ,
                    this.color = String(row.color);
                    this.brand = row.brand;
                    this.type = row.type; //
                    this.model = row.model; //
                    this.engineNum = row.engineNum; //
                    this.registrationDate = new Date(row.registrationDate); //证件有效期YYYYMMDD' ,

                    this.vim = row.vim;
                    this.ownerType = row.ownerType;
                    this.ownerName = row.ownerName;
                    this.ownerID = row.ownerID;
                    this.seatNum = row.seatNum;
                    this.length = row.length;
                    this.width = row.width;
                    this.height = row.height;
                    this.fuelType = row.fuelType;
                    this.issuOrganization = row.issuOrganization; //核发机关' ,
                    this.issuDate = new Date(row.issuDate); //核发日期' ,
                },
                handlerNewAdd: function() {
                    this.isEdit = false;
                    this.modal = true;
                },
                handlerClickQuery: function() {
                    this.queryYongZhouVehicles();
                },
                handleDelete: function(params) {
                    var me = this;
                    var url = myUrls.deleteYongZhouVehicles();
                    var data = {
                        vehicles: [params.row.vehicleId],
                    }
                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status === 0) {
                            me.$Message.success("删除成功");
                            me.$delete(me.tableData, params.index);
                        } else {
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    if (wHeight < 760) {
                        wHeight = 750;
                    }
                    this.taleHeight = wHeight - 148;
                },
                handleSubmit: function() {
                    var me = this;
                    var url = '';
                    var data = {
                        deviceid: this.deviceid,
                        enterId: this.enterIdValue,
                        plateNum: this.plateNum,
                        roadTransportLicense: this.roadTransportLicense,
                        identifier: this.identifier,
                        category: Number(this.category),
                        color: Number(this.color),
                        brand: this.brand,
                        type: this.type,
                        model: this.model,
                        engineNum: this.engineNum,
                        registrationDate: DateFormat.format(this.registrationDate, 'yyyy-MM-dd') + " 00:00:00", //行驶注册日期' , 
                        vim: this.model,
                        ownerType: this.ownerType,
                        ownerName: this.ownerName,
                        ownerID: this.ownerID,
                        fuelType: this.fuelType,
                        seatNum: this.seatNum,
                        length: this.length,
                        width: this.width,
                        height: this.height,
                        scope: this.scope,
                        issuOrganization: this.issuOrganization,
                        issuDate: DateFormat.format(this.issuDate, 'yyyy-MM-dd') + " 00:00:00", // 核发日期' ,
                        // int operateFlag;//操作标识 1:新增 2:更新 3:删除' ,  
                        creater: userName
                    };
                    if (this.isEdit) {
                        data.operateFlag = 2;
                        data.vehicleId = editObject.vehicleId;
                        url = myUrls.editYongZhouVehicle();

                    } else {
                        data.operateFlag = 1;
                        url = myUrls.createYongZhouVehicle();
                    };

                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            if (me.isEdit) {
                                Object.assign(editObject, data);
                                me.$Message.success('编辑成功');
                            } else {
                                me.queryYongZhouVehicles();
                                me.$Message.success('新增成功');
                            }
                            me.modal = false;
                        } else {
                            me.$Message.error(resp.cause);
                        }
                    });
                },
                cleanValue: function() {
                    this.queryParameter = '';
                },
                queryYongZhouVehicles: function() {
                    var me = this;
                    var url = myUrls.queryYongZhouVehicles();
                    var data = {
                        creater: userName,
                        keyword: this.queryParameter,
                    };
                    me.loading = true;
                    utils.sendAjax(url, data, function(resp) {
                        me.loading = false;
                        if (resp.status == 0) {
                            me.tableData = resp.vehicles;
                        }
                    });
                },
            },
            computed: {
                modalTile: function() {
                    return this.isEdit ? '编辑车辆信息' : '新增车辆信息';
                },
            },
            mounted: function() {
                var me = this;
                me.calcTableHeight();
                me.queryYongZhouVehicles();
                me.queryYongZhouEnters();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>